<link rel="stylesheet" type="text/css" href="/assets/third-party/datatables/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="/assets/third-party/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">

<style type="text/css">
	.il{
		display: inline;
	}
	.form-group .control-label{
		padding-right: 5px;
	}
	.form-group .col-sm-7{
		padding-left: 5px;
	}
	.form-group input, .form-group select{
		width: 88%;
		display: inline;
	}
	.dataTables_empty{
		text-align: center;
	}
</style>

<div class="container" style="margin-top: 60px;">
	<div class="row">
		<div class="col-lg-12">
			<select id="grade" class="form-control" style="display: inline; width: 120px;">
				<option value="">所有学员</option>
				<?php foreach ($grades as $key => $value) { ?>
				<option value="<?php echo $value->name; ?>"><?php echo $value->name; ?></option>
				<?php } ?>
			</select>
			<!--<a href="#" class="btn btn-info"> <i class="fa fa-search"></i> 查询 </a> -->
			<a href="#" class="btn btn-success" data-toggle="modal" data-target="#studentModal"> <i class="fa fa-plus"></i> 新增学员 </a>
			<!--<a href="#" class="btn btn-success"> <i class="fa fa-plus"></i> 全选 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 批量删除 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 刷新 </a>-->
		</div>
	</div>
	<div class="row" style="margin-top: 10px;">
		<div class="col-lg-12">
			<div class="panel panel-default">
                <div class="panel-heading">
                    学员列表
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
					<table id="studentList" class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>学号</th>
								<th>姓名</th>
								<th>年级</th>
								<th>性别</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<?php foreach ($items as $key => $value) { ?>
							<tr data-id="<?php echo $value->id; ?>" data-member="<?php echo $value->family_id;?>">
								<td><?php echo $value->no; ?></td>
								<td><?php echo $value->people ? $value->people->first_name . $value->people->last_name : ''; ?></td>
								<td><?php echo $value->grade ? $value->grade->name : ''; ?></td>
								<td><?php echo $value->people && $value->people->gender ? $value->people->gender : ''; ?></td>
								<td>
									<a href="/admin/student/learn_records?student_id=<?php echo $value->id;?>" class="btn btn-sm btn-info"> <i class="fa fa-search"></i> 上课记录 </a>
									<a role="edit" class="btn btn-sm btn-info" data-toggle="modal" data-target="#studentModal"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
									<a role="edit" class="btn btn-sm btn-success" data-toggle="modal" data-target="#courseModal"> <i class="fa fa-pencil-square-o"></i> 选课 </a>
									<a class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmModal"> <i class="fa fa-trash-o"></i> 删除 </a>									
								</td>
							</tr>
							<?php } ?>							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 学员详情模态框 -->
<div class="modal fade" id="studentModal" tabindex="-1" role="dialog" aria-labelledby="studentModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="studentModalTitle"> 学员资料 </h4>
			</div>
			<div class="modal-body">
				<form id="frmMember" role="form" action="" method="post" data-parsley-validate>
					<div class="form-group">
						<label for="phone">学员编号</label>
						<input type="text" class="form-control" id="no" name="no" placeholder="系统自动生成的学员卡号" value="" required>
					</div>
					<div class="form-group">
						<label for="first_name">学员姓名</label>
						<input type="text" class="form-control" id="first_name" name="first_name" placeholder="姓" style="width: 44%; display: inline;" required  data-parsley-errors-container="#name_help_block">
						<input type="text" class="form-control" id="last_name" name="last_name" placeholder="名" style="width: 44%; display: inline;">
						<p id="name_help_block"></p>
					</div>
					<div class="form-group">
						<label for="phone">学员性别</label>
						<select id="gender" name="gender" class="form-control">
							<option value="">保密</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
					<div class="form-group">
						<label for="birthday">学员生日</label>
						<input type="text" class="form-control" id="birthday" name="birthday" placeholder="点击选择生日" role="datetime">
					</div>
					<div class="form-group">
						<label for="grade_id">所属年级</label>
						<select id="grade_id" name="grade_id" class="form-control" required>
							<?php foreach ($grades as $key => $value) { ?>
							<option value="<?php echo $value->id; ?>"><?php echo $value->name; ?></option>
							<?php } ?>
						</select>
					</div>
					<div class="form-group">
						<label for="tel">家庭电话</label>
						<input type="text" class="form-control" id="tel" name="tel" placeholder="家庭电话">
					</div>
					<div class="form-group">
						<label for="phone">手机号码</label>
						<input type="text" class="form-control" id="phone" name="phone" placeholder="手机号码" required>
					</div>
					<div class="form-group">
						<label for="email">邮箱地址</label>
						<input type="text" class="form-control" id="email" name="email" placeholder="邮箱地址">
					</div>
					<div class="form-group">
						<label for="qq">Q Q 号码</label>
						<input type="text" class="form-control" id="qq" name="qq" placeholder="QQ号码">
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnSave" class="btn btn-primary"> 保存 </button>
			</div>
		</div>
	</div>
</div>

<!-- 学员详情模态框 -->
<div class="modal fade" id="courseModal" tabindex="-1" role="dialog" aria-labelledby="courseModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="courseModalTitle"> 学员选课 </h4>
			</div>
			<div class="modal-body">
				<table class="table table-bordered">
					<tbody>
						<tr>
							<th>学员编号</th>
							<td style="width: 35%;" id="stuNo"></td>
							<th>学员姓名</th>
							<td style="width: 35%;" id="stuName"></td>
						</tr>
						<tr>
							<th>性别</th>
							<td id="stuGender"></td>
							<th>出生年月</th>
							<td id="stuBirthday"></td>
						</tr>
					</tbody>
				</table>

				<a id="btnAddCourse" class="btn btn-success" style="margin-bottom: 15px;">新增选课记录</a>
				<div style="height:300px;overflow-y:auto;">
					<table id="tableCourses" class="table table-bordered">
						<thead>
	                        <tr>
	                            <th>课程名称</th>
	                            <th>选课时间</th>
	                            <th>操作</th>
	                        </tr>
	                    </thead>
	                    <tbody id="courses">
	                        <tr>
	                        	<td colspan="3" class="dataTables_empty">数据加载中...</td>
	                        </tr>
	                    </tbody>
					</table>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnSaveCourse" class="btn btn-primary"> 保存 </button>
			</div>
		</div>
	</div>
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="alert alert-warning">
					<strong>确定删除？</strong>
					<p>删除该学员，所有与该学员相关的数据将全部被清空!</p>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnConfirm" class="btn btn-danger"> 确定 </button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/assets/third-party/jquery-tmpl-master/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/assets/third-party/jquery-tmpl-master/jquery.tmplPlus.min.js"></script>
<script type="text/x-jquery-tmpl" id="tr">
<tr data-id="{{if id}}${id}{{/if}}">
    <td>
		{{if course}}
			${course}
		{{else}}
			<select class="form-control" style="width: 200px;">
		    {{html select }}
		    </select>
		{{/if}}
    </td>
    <td>
	    {{if created}}
			${created}
		{{/if}}
    </td>
    <td>
        <a class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmModal"> <i class="fa fa-trash-o"></i> 删除 </a>                                 
    </td>
</tr>                        
</script>

<script type="text/javascript" src="/assets/third-party/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/assets/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
	
	var flag = false;
	var select = '', sid = 0, mid = 0;

	$(function(){

		$('#studentList').dataTable({
	        "oLanguage": {
	            "sLengthMenu": "每页显示 _MENU_ 条记录",
	            "sZeroRecords": "很抱歉，未找到相关数据",
	            "sInfo": "从 _START_ 至 _END_ /共 _TOTAL_ 条数据",
	            "sInfoEmpty": "没有符合条件的数据",
	            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
	            "sSearch": "搜索：",
	            "oPaginate": {  
					"sFirst": "首页",  
					"sPrevious": "上一页",
					"sNext": "下一页",
					"sLast": "末页"
				}  
	        },
	        fnDrawCallback: function(){

	            if(window.flag == false){
	        		window.flag = true;
	        		var index = localStorage.getItem('pagination_index');
	                localStorage.removeItem('pagination_index');
		        	if( ! index){
		        		index = 1;
		        	}
		        	index -= 1;

		        	$('#studentList').dataTable().fnPageChange(index);
	                
	        	}
            }
	    });

	    $('#btnAddCourse').click(function(){
	    	$('.dataTables_empty').remove();
	    	var ts = Date.parse(new Date());
	    	ts += $('#courses').find('tr').length;
	    	$('#courses').append(tr, {select: select, id: ts}, null);
	    });

		$('#studentList').delegate('a[data-target="#studentModal"]', 'click', function(){
			$('#no').val(Date.parse(new Date()) / 1000);
	    	$('#first_name').val('');
	    	$('#last_name').val('');
	    	$('#gender').val('');
	    	$('#birthday').val("");
	    	$('#level_id').val("");
	    	$('#tel').val("");
	    	$('#phone').val("");
	    	$('#email').val("");
	    	$('#qq').val("");

	    	if($(this).attr('role') == 'edit'){
	    		localStorage.setItem('pagination_index', $('.pagination .active').find('a').text());
	    		$('#frmMember').attr('action', '/admin/student/edit/' + $(this).parent().parent().attr('data-id'));
	    		$.get('/admin/student/view/' + $(this).parent().parent().attr('data-id'), 
	    			function(data, status){
	    				if(data.status == 'succ'){
	    					var item = data.data;
	    					$('#no').val(item.no);
	    					$('#real_no').val(item.real_no);
					    	$('#first_name').val(item.people.first_name);
					    	$('#last_name').val(item.people.last_name);
					    	$('#nickname').val(item.people.nickname);
					    	$('#gender').val(item.people.gender);
					    	$('#birthday').val(item.people.birthday);
					    	$('#level_id').val(item.level_id);
					    	$('#tel').val(item.people.tel);
					    	$('#phone').val(item.people.phone);
					    	$('#email').val(item.people.email);
					    	$('#qq').val(item.people.qq);
	    				}
	    			}, 'json');
	    	}else{
	    		$('#frmMember').attr('action', '/admin/student/create/');
	    	}
		});

		$('#studentList').delegate('a[data-target="#courseModal"]', 'click', function(){
			$('#courses').empty();
    		$('#courses').append('<tr><td colspan="3" class="dataTables_empty">加载中...</td></tr>');
	    	localStorage.setItem('pagination_index', $('.pagination .active').find('a').text());
	    	sid = $(this).parent().parent().attr('data-id');
	    	mid = $(this).parent().parent().attr('data-member');
	    	$.get('/admin/student/courses/' + sid, 
    			function(data, status){
    				$('#courses').empty();
    				if(data.status == 'succ'){
    					var items = data.data;
    					$('.dataTables_empty').remove();
    					if(items.length < 1){
    						$('#courses').append('<tr><td colspan="3" class="dataTables_empty">未找到相关数据</td></tr>');
    						return;
    					}
    					for (var i = 0; i < items.length; i++) {
    						$('#courses').append(tr, items[i], null);
    					}
	    				
    				}
    			}, 'json');

    		$.get('/admin/student/view/' + $(this).parent().parent().attr('data-id'), 
    			function(data, status){
    				if(data.status == 'succ'){
    					var item = data.data;
    					$('#stuBirthday').text(item.people.birthday);
    					$('#stuNo').text(item.no);
    					$('#stuName').text(item.people.first_name + item.people.last_name);
    					$('#stuGender').text(item.people.gender);
    				}
    			}, 'json');
		});

	    $('#grade').change(function(){
	    	$('input[type="search"]').val($(this).val()).keyup();
	    });

	    $('a[data-target="#confirmModal"]').click(function(){
	    	$('#btnConfirm').attr('data-id', $(this).parent().parent().attr('data-id'));
	    });

	    $('#btnSaveCourse').click(function(){
	    	var trs = $('#courses').find('tr');

	    	var courses = [];
	    	for (var i = 0; i < trs.length; i++) {
	    		var select = $(trs[i]).find('select');
	    		if(select.val() == undefined){
	    			continue;
	    		}
	    		courses[courses.length] = select.val();
	    	}

	    	$.post('/admin/student/course/' + sid, 
    			{
    				'courses': courses,
    				'member_id': mid
    			},
    			function(data, status){
    				if(data.status == 'succ'){
    					$('#courseModal').modal('hide');
    				}
    			}, 'json');
	    });

	    $('#btnConfirm').click(function(){
	    	var id = $(this).attr('data-id');
	    	$.get('/admin/student/delete/' + id,
	    		function(data, status){
	    			if(data.status == 'succ'){
	    				$('#studentList').find('tr[data-id="' + id + '"]').remove();
	    				$('#confirmModal').modal('hide');
	    			}
	    		}, 'json');
	    });

	    $.get('/admin/course', 
			function(data, status){
				select = '';
				if(data.status == 'succ'){
					var courses = data.data;
					var grades = data.grades;
					for (var i = 0; i < grades.length; i++) {
						var str = '';
						for (var j = 0; j < courses.length; j++) {
							if(courses[j].grade_id == grades[i].id){
								str += "<option value='" + courses[j].id + "'>" + courses[j].name + "</option>";
							}
						}
						select += "<optgroup label='" + grades[i].name + "'>" + str + "</optgroup>";
					}
				}

			}, 'json');
	});
</script>

<script type="text/javascript" src="/assets/third-party/parsley/parsley.min.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.extra.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btnSave').click(function(){
			$('#frmMember').submit();
		});
	});
</script>

<script type="text/javascript" src="/assets/third-party/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/assets/third-party/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
	$('input[role="datetime"]').datetimepicker({
		language: 'zh-CN'
	});
});
</script>